<template>
	<div class="container"  >
		<nav>
			<div class="topMenu" @click="getMenu">
		        <img src="../../assets/images/movieClips/1/main_menu_normal.png" alt="" />
	        </div>
			<div class="topTitle">
		           热榜
	        </div>
	        <router-link to="searchIndex">
	        	<div class="topSearch">
		        	<img src="../../assets/images/movieClips/1/main_search_normal.png" alt="" />
	            </div>
	        </router-link>
		</nav>
		<div :class="sideNavShow?'newContentRight':'contentRight'" >
			<div class="content">
				<div class="banner">
					<swiper :options="swiperOption" class="myswiper">
					    <swiper-slide v-for="(item,index) in imgList" :key="index" class='swiperImgBox'>
					    	<img :src="item"  alt=""  class="bannerImg"/>
					    </swiper-slide>
					    <!--<div class="swiper-pagination"  slot="pagination"></div>
					    <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
					    <div class="swiper-button-next swiper-button-white" slot="button-next"></div>-->
				  </swiper>
					<!--<el-carousel height="150px" class='mySwiper'>
	                    <el-carousel-item v-for="(item,index) in imgList" :key="index" class="mySwiperItem">
	                        <div class="bannerImgBox"><img :src="item"  alt="" /></div>
	                    </el-carousel-item>
	                </el-carousel>-->
	                
				</div>
				<div class="filmList">
					<router-link @click.native='enterDetail' v-for="(item,index) in filmList" :key="index" :to="{path: 'detail', query: {id: item.id,item:item}}">
						<div class="list1" >
							<div class="image" >
								<img :src="item.imgUrl" alt="" />
							</div>
							<p class="title">{{item.filmTiTle}}</p>
							<p class="desc">{{item.filmDesc}}</p>
					    </div>
					</router-link>
			    </div>
			    <div class="goTopBtn" @click="goTop">点击返回顶部</div>
		    </div>
	        <BottomNav />
		</div>
		<div class="sideNav" v-show="sideNavShow">
		    <div class="sideNavLogo">
		    	<img src="../../assets/images/movieClips/2/menu_logo.png" alt="" />
		    </div>
		    <div class="sideMenu">
		    	<img @click="changeMenuInfo"  src="../../assets/images/movieClips/2/menu_hot_normal.png" alt="" />
		    	<img @click="changeMenuInfo" src="../../assets/images/movieClips/2/menu_netdrama_normal.png" alt="" />
		    	<img src="../../assets/images/movieClips/2/menu_netprogram_normal.png" alt="" />
		    	<img src="../../assets/images/movieClips/2/menu_movie_normal.png" alt="" />
		    	<img src="../../assets/images/movieClips/2/menu_tv_normal.png" alt="" />
		    	<img src="../../assets/images/movieClips/2/menu_show_normal.png" alt="" />
		    	<img src="../../assets/images/movieClips/2/menu_favorite_normal.png" alt="" />
		    </div>
		</div>
		<div class="loginBox" v-show="IsLoginBoxShow">
			<div class="content">
				<p class="title">登录后更精彩哦!</p>
				<div class="btnBox">
					<router-link class="btnBoxLeft" to="login">
						登录
					</router-link>
					<router-link class="btnBoxRight" to="register">
						注册
					</router-link>
					<div class="threeTools">
						<p>
							<span>不用注册直接登录!</span>
							<span @click="loginBoxHidden" style="color: #A54BE8">不注册也不登录!</span>
						</p>
						<div class="toolsBox">
							<img src="../../assets/images/movieClips/3/WeChat-1.png" alt="" />
							<img src="../../assets/images/movieClips/3/CircleOfFriends-1.png" alt="" />
							<img src="../../assets/images/movieClips/3/MicroBlog-1.png" alt="" />
						</div>
					</div>
				</div>
			</div>
	    </div>
	</div>
</template>

<script>
import BottomNav from "../public/bottomNav"	;
import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);
export default {
  name: 'movieClips',
  data () {
    return {
    	swiperOption: {
	      autoplay: 3000,
//	      direction: 'vertical',有它前后点击按钮和小圆点。进度条都不能出现
	      grabCursor: true,
	      setWrapperSize: true,
	      autoHeight: true,
	      pagination: '.swiper-pagination',
	      paginationClickable: true,
	      prevButton: '.swiper-button-prev',
	      nextButton: '.swiper-button-next',
//	      scrollbar: '.swiper-scrollbar',
	      mousewheelControl: true,
	      observeParents: true,
	      debugger: true,
	      loop:true,
      },
      imgList:[],
      filmList:[],
      sideNavShow:false,
      IsLoginBoxShow:false,
      isLogin:false,
      isRegister:false,
    }
  },
  methods:{
  	enterDetail(event){
//		console.log(1)
//		//缓存第几个电视剧的数据里的ID
//		localStorage.currentId=query.id;
//		//缓存标题
//		localStorage.filmTitle=query.item.filmTiTle;
//		//缓存电视的相关信息
//		localStorage.filmDetails=JSON.stringify(query.item.details);
  	},
  	changeMenuInfo(event){
		console.log(event)
  	},
  	loginBoxHidden(event){
  		this.IsLoginBoxShow=false;
  	},
  	goLogin(event){
  		this.isLogin=true;
  	},
  	goRegister(event){
  		this.isRegister=true;
  	},
  	getMenu(event){
  		this.sideNavShow=!this.sideNavShow;
		this.IsLoginBoxShow=!this.IsLoginBoxShow;
  	},
  	goTop(event){
  		var time;
  		time=setInterval(function(){
            var top = document.body.scrollTop||document.documentElement.scrollTop;
            top=top*0.9;
            document.body.scrollTop=top;
            document.documentElement.scrollTop=top;
            if(top==0){
                clearInterval(time);
            }
        },100);
  	}
  },
  components: {
  	BottomNav,
    swiper,
    swiperSlide
  },
  created(){
    this.$axios.get("http://127.0.0.1:3000/filmList")
    .then(res=>{
    	this.filmList=res.data.filmList;
    	var imgListArr=[];
    	for(var i=0;i<4;i++){
    	    imgListArr.push(res.data.filmList[i].bannerImgUrl)
    	}

    	this.imgList=imgListArr;
    })
    .catch(error=>{
    	console.log(error)
    })
  }
  
}
</script>

<style scoped lang="less">
@import "../../assets/css/swiper-3.4.2.min.css";
@current:100rem;
.container{
	position: relative;
	.sideNav{
		position: fixed;
		width: 260/@current;
		height: 1300/@current;
		background: url("../../assets/images/movieClips/2/menu_bg.png");
		left:0;
		top:0;
		bottom:0;
		.sideNavLogo{
			margin: 20/@current 60/@current;
			img{
				margin-top: 150/@current;
				width: 140/@current;
				height: 70/@current;
			}
		}
		.sideMenu {
			margin: 0 75/@current;
			img{
				margin-top: 74/@current;
				display: block;
				width: 110/@current;
				height: 40/@current;
			}
		}
	}
	.loginBox{
		z-index: 333;
		box-sizing: border-box;
		width:600/@current;
		height:450/@current;
		background-color:white!important;
		position: fixed;
		top: 320/@current;
		left: 20/@current;
		border-radius: 10/@current;
		.content{
			.title{
				text-align: center;
				font-size: 30/@current;
				color: #434343;
				font-weight: 500;
				margin-top: 34/@current;
			}
			.btnBox{
				padding: 0 40/@current;
				margin-top: 40/@current;
				.btnBoxLeft,.btnBoxRight{
					width: 245/@current;
					height: 75/@current;
					font-size: 30/@current;
					font-weight: 500;
					color: white;
					background-size:245/@current 75/@current;
					background-repeat:no-repeat;
					float: left;
					text-align: center;
					line-height: 75/@current;
				}
				.active{
					color: red;
				}
				.btnBoxLeft{
					
					background-image: url('../../assets/images/movieClips/3/dialog_login_warm_reg_btn_normal.png');
				}
				.btnBoxRight{
					color: #A54BE8;
					margin-left: 30/@current;
					background-image: url('../../assets/images/movieClips/3/dialog_login_warm_login_btn_normal.png');
				}
				.threeTools{
					p{   
						display: block;
						font-size: 30/@current;
						color: #a9a2b4;
						padding-top:115/@current ;
					}
					.toolsBox{
						margin-bottom: -20/@current ;
						padding: 0 20/@current ;
						img{
							margin-top: 30/@current;
							width: 100/@current;
							height: 100/@current;
						}
						img:nth-child(2){
							margin-left: 60/@current;
						}
						img:nth-child(3){
							margin-left: 60/@current;
						}
					}
				}
			}
		}
	}
	.contentRight{
		width: 640/@current;
		margin-left: 0;
	}
	.newContentRight{
		width: 640/@current;
		margin-left:260/@current;
	}
	nav{
		width: 100%;
		height: 88/@current;
		background-color: #A54BE8;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 222;
		box-sizing: border-box;
		padding: 0 30/@current;
		.topMenu{
			width:100/@current;
			height:100%;
			position:relative;
			img{
				position: absolute;
				width: 33/@current;
				height: 33/@current;
				top: 30/@current;
				left:0;
			}
		}
		.topTitle{
			width:100/@current;
			height:88/@current;
			font-size: 36/@current;
			position: absolute;
			top: 0;
			left: 280/@current;
			color: white;
			font-weight: 700;
			text-align: center;
			line-height: 88/@current;
		}
		.topSearch{
			width:100/@current;
			height:100%;
			position:relative;
			left: 480/@current;
			top: -88/@current;
			img{
				position: absolute;
				top: 30/@current;
				right: 0;
				width: 33/@current;
				height: 33/@current;
			}
		}
    }
    .content{
    	padding: 0 0 20/@current 0;
    	.banner{
    		margin:88/@current  0 0 0;
    		position:relative;
    		.myswiper{
    			width:100%;
    			height:350/@current;
    			.swiper-container-autoheight{
    				.swiper-wrapper{
    					height: 350/@current;
    					.swiperImgBox{
		    				height: 350/@current;
		    			}
		    			
		    			.swiper-pagination-bullet-active {
						    opacity: 1;
						    background: white!important;
						}
    				}
    			}
    		}
    	}
    	.filmList{
			width: 100%;
			box-sizing: border-box;
			padding: 5/@current 10/@current;
			overflow: hidden;
	        .list1{
	        	width: 290/@current;
	        	height: 265/@current;
	        	float: left;
	        	margin:20/@current 10/@current 20/@current 10/@current;
	        	.image{
	        		display: block;
	        		width: 100%;
	        		height: 200/@current;
	        		margin-bottom: 13/@current;
	        	    overflow: hidden;
	        		
	        		img{
	        			width: 100%;
	        			height: 200/@current;
	        		}
	        	}
	        	.title{
	        		font-size: 28/@current;
	        		color: #69676B;
	        		margin-bottom: 9/@current;
	        		font-weight: 600;
	        	}
	        	.desc{
	        		font-size: 24/@current;
	        		color: #9C9B9C;
	        		overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
	        	}
	        }
    	}
    	.goTopBtn{
    		margin: 40/@current 0 130/@current 0;
    		width: 230/@current;
    		height: 60/@current;
    		font-size: 26/@current;
    		text-align: center;
    		line-height:60/@current;
    		border: 1px solid skyblue;
    		background-color: white;
    		border-radius: 15/@current;
    		margin-left: 200/@current;
    		color: #A54BE8;
    	}
    } 
}


	
</style>